Dokumentacja PrestaShop Google Tag Manager
Kompleksowa dokumentacja dla modułu PrestaShop zaawansowanej integracji z Google Tag Manager (cc_ps_googletrack) z obsługą Enhanced Ecommerce, Enhanced Conversions oraz pełną konfiguracją eventów.Spis treści
- Wprowadzenie
- Instalacja i wymagania systemowe
- Aktywacja modułu
- Podstawowa konfiguracja GTM
- Konfiguracja eventów
- Rozszerzona warstwa danych
- Enhanced Conversions (dane użytkownika)
- Tryb debugowania
- Logowanie eventów
- Własny kod śledzący
- System tłumaczeń
- Eventy – szczegóły
- Kalendarz eventów
- Test Tag Assistant
- Rozwiązywanie problemów
- FAQ
1. Wprowadzenie
CC Google Tag Manager to zaawansowany moduł PrestaShop zapewniający pełną integrację z Google Tag Manager. Moduł automatycznie śledzi wszystkie kluczowe eventy Enhanced Ecommerce zgodnie z najnowszymi standardami.Kluczowe funkcje modułu:
- Pełna integracja z Google Tag Manager (GTM)
- Automatyczne śledzenie 18 różnych eventów
- Enhanced Ecommerce zgodnie ze standardami Google
- Enhanced Conversions z hashowanymi danymi użytkownika
- Rozszerzona warstwa danych (dataLayer) z dodatkowymi informacjami
- Konfiguracja włączania/wyłączania poszczególnych eventów
- Tryb debugowania z logowaniem do konsoli przeglądarki
- Logowanie eventów do bazy danych z przeglądaniem
- Własny kod JavaScript wykonywany na wszystkich stronach
- Pełny system tłumaczeń (polski, angielski, możliwość dodania innych języków)
- Zgodność z PrestaShop 1.7.x i 8.x oraz 9.x
- Obsługa Google Consent Mode 2.0
2. Instalacja i wymagania systemowe
Wymagania systemowe- PrestaShop 1.7.0.0 lub nowszy (testowane do wersji 9.0)
- PHP 7.4 lub nowszy
- Dostęp do panelu administracyjnego PrestaShop
- Konto Google Tag Manager (bezpłatne)
- Opcjonalnie: Google Analytics 4 (bezpłatne)
- Pobierz plik ZIP modułu z oficjalnej strony cocos.codes
- Zaloguj się do panelu administracyjnego PrestaShop
- Przejdź do: Moduły → Menedżer modułów
- Kliknij „Wgraj moduł” w prawym górnym rogu
- Wybierz pobrany plik ZIP i kliknij „Wgraj ten moduł”
- Po zakończeniu instalacji kliknij „Konfiguruj”
- Moduł jest gotowy do konfiguracji
Info
Po instalacji moduł automatycznie rejestruje wszystkie niezbędne hooki PrestaShop oraz tworzy tabelę w bazie danych do logowania eventów (jeśli funkcja jest włączona). Instalacja nie wymaga żadnych dodatkowych kroków technicznych.
3. Aktywacja modułu
Moduł nie wymaga osobnej aktywacji licencji – działa od razu po instalacji. Jednak aby rozpocząć śledzenie, musimy skonfigurować podstawowe ustawienia.Pierwsze kroki po instalacji:
- Przejdź do Moduły → Menedżer modułów
- Znajdź moduł „CC Google Tag Manager”
- Kliknij „Konfiguruj”
- Zostaniemy przeniesieni do strony ustawień modułu
Wskazówka
Przed rozpoczęciem konfiguracji warto przygotować ID kontenera GTM (format: GTM-XXXXXX). Możemy je znaleźć w panelu Google Tag Manager po utworzeniu nowego kontenera dla naszej witryny.
4. Podstawowa konfiguracja GTM
Konfiguracja Google Tag Manager jest pierwszym krokiem do uruchomienia śledzenia w sklepie.Tworzenie kontenera GTM:
- Przejdź do tagmanager.google.com
- Zaloguj się kontem Google
- Kliknij „Utwórz konto”
- Podaj nazwę konta (np. nazwę firmy)
- Podaj nazwę kontenera (np. nazwę sklepu)
- Wybierz „Web” jako typ kontenera
- Zaakceptuj warunki usługi
- Skopiuj ID kontenera (GTM-XXXXXX)
- W konfiguracji modułu znajdź sekcję „Podstawowa konfiguracja”
- Zaznacz checkbox „Włącz Google Tag Manager”
- Wklej skopiowany GTM Container ID (np. GTM-ABC1234)
- Kliknij „Zapisz” na dole strony
| Opcja | Opis | Wartość |
| Włącz GTM | Aktywuje śledzenie przez GTM | TAK / NIE |
| GTM Container ID | Identyfikator kontenera GTM | GTM-XXXXXX |
- Kod GTM (gtag.js) jest automatycznie dodawany do wszystkich stron sklepu
- Skrypt GTM umieszczany jest w sekcji <head>
- Noscript fallback dodawany jest zaraz po <body>
- DataLayer zaczyna zbierać dane o eventach
- Wszystkie eventy są automatycznie przesyłane do GTM
Sukces
Po poprawnej konfiguracji kod GTM będzie widoczny w źródle strony. Możemy to sprawdzić przez prawym przyciskiem myszy → „Pokaż źródło strony” i wyszukując GTM-XXXXXX. Znajdziemy tam zarówno główny skrypt jak i dataLayer.
5. Konfiguracja eventów
Moduł obsługuje 18 różnych eventów. Każdy event możemy włączyć lub wyłączyć niezależnie według potrzeb biznesowych.Lista dostępnych eventów:
| Event | Opis | Kiedy jest wywoływany |
| page_view | Wyświetlenie strony | Na każdej stronie sklepu |
| view_item | Wyświetlenie produktu | Na stronie produktu |
| view_item_list | Wyświetlenie listy produktów | Kategorie, wyniki wyszukiwania, strona główna |
| select_item | Kliknięcie w produkt | Kliknięcie na produkt z listy |
| add_to_cart | Dodanie do koszyka | Po dodaniu produktu do koszyka |
| remove_from_cart | Usunięcie z koszyka | Po usunięciu produktu z koszyka |
| view_cart | Wyświetlenie koszyka | Na stronie koszyka |
| begin_checkout | Rozpoczęcie zamówienia | Pierwszy krok realizacji zamówienia |
| add_shipping_info | Dodanie informacji o dostawie | Wybór metody dostawy |
| add_payment_info | Dodanie informacji o płatności | Wybór metody płatności |
| purchase | Zakup | Strona potwierdzenia zamówienia |
| search | Wyszukiwanie | Użycie wyszukiwarki sklepu |
| select_promotion | Kliknięcie w promocję | Kliknięcie w baner promocyjny |
| login | Logowanie | Zalogowanie klienta |
| sign_up | Rejestracja | Rejestracja nowego klienta |
| add_to_wishlist | Dodanie do listy życzeń | Dodanie produktu do wishlist |
| share | Udostępnianie | Kliknięcie w przycisk social share |
- W konfiguracji modułu przejdź do sekcji „Konfiguracja eventów”
- Znajdź listę wszystkich 18 eventów
- Zaznacz checkboxy przy eventach które chcemy śledzić
- Odznacz checkboxy przy eventach które chcemy wyłączyć
- Skorzystaj z przycisków „Zaznacz wszystkie” lub „Odznacz wszystkie” dla szybkiej konfiguracji
- Kliknij „Zapisz”
// Konfiguracja eventów przekazywana do JS jako: window.ccpsEventConfig = { 'page_view': true, 'view_item': true, 'add_to_cart': true, 'purchase': false, // ... itd. };
// Sprawdzanie czy event jest włączony: function isEventEnabled(eventName) { if (typeof config.eventConfig[eventName] !== 'undefined') { return config.eventConfig[eventName]; } return true; // Domyślnie włączone }Notatka
Wyłączone eventy nie są w ogóle wysyłane do dataLayer, co oszczędza zasoby i nie zaśmieca danych w Google Analytics. Jeśli event jest wyłączony, w trybie debug pojawi się komunikat „Event wyłączony: nazwa_eventu” zamiast wysyłania danych.
6. Rozszerzona warstwa danych
Funkcja rozszerzonej warstwy danych (Enhanced Data) dodaje dodatkowe informacje do każdego eventu, wzbogacając analizy w Google Analytics.Co zawiera rozszerzona warstwa danych:
- Dane strony – typ strony, URL, tytuł, język, waluta
- Dane użytkownika – status klienta (visitor/guest/customer), ID użytkownika
- Dane produktów – pełne kategorie (do 5 poziomów), marki, atrybuty
- Dane zamówień – metody dostawy, metody płatności, kupony
- W konfiguracji modułu znajdź sekcję „Rozszerzone opcje danych”
- Zaznacz checkbox „Rozszerzona warstwa danych”
- Zaznacz checkbox „Dane strony” aby dodać informacje o stronie
- Zapisz ustawienia
dataLayer.push({ 'event': 'page_view', 'page_type': 'product', 'page_url': 'https://example.com/produkt', 'page_title': 'Nazwa produktu - Sklep', 'language': 'pl', 'currency': 'PLN', 'customer_status': 'customer', 'user_id': 123 });| Typ strony | Wartość page_type | Kiedy |
| Strona główna | home | IndexController |
| Strona produktu | product | ProductController |
| Kategoria | category | CategoryController |
| Koszyk | cart | CartController |
| Realizacja zamówienia | checkout | OrderController |
| Potwierdzenie zakupu | purchase | OrderConfirmationController |
| Wyszukiwanie | search | SearchController |
| Strona treści | content | CmsController |
| Inne | other | Wszystkie pozostałe |
- item_category – kategoria główna (z normalizacją – pierwsza litera wielka)
- item_category2 – podkategoria poziom 2
- item_category3 – podkategoria poziom 3
- item_category4 – podkategoria poziom 4
- item_category5 – podkategoria poziom 5
Wskazówka
Rozszerzona warstwa danych jest szczególnie przydatna przy tworzeniu zaawansowanych segmentów w Google Analytics. Możemy na przykład analizować konwersję osobno dla różnych typów stron, języków czy statusów klientów. Włączenie tej funkcji jest wysoce rekomendowane.
7. Enhanced Conversions (dane użytkownika)
Enhanced Conversions to funkcja Google Ads która poprawia dokładność pomiaru konwersji poprzez przesyłanie hashowanych danych użytkowników.Co to są Enhanced Conversions:
- Hashowane (SHA-256) dane osobowe użytkowników
- Email, telefon, imię, nazwisko, miasto, kod pocztowy, kraj
- Przesyłane do Google w bezpiecznej formie
- Umożliwiają lepsze przypisywanie konwersji do kampanii reklamowych
- Wymagają zgody użytkownika (RODO/GDPR)
- W konfiguracji modułu znajdź sekcję „Rozszerzone opcje danych”
- Zaznacz checkbox „Dane użytkownika (Enhanced Conversions)”
- Upewnij się, że masz zgodę użytkowników na przetwarzanie danych (RODO)
- Zapisz ustawienia
Ostrzeżenie
Przesyłanie danych użytkownika wymaga zgody RODO! Upewnijmy się, że nasz sklep ma aktualną politykę prywatności i cookies oraz że użytkownicy wyrażają świadomą zgodę na przetwarzanie danych. Zalecamy integrację z modułem zarządzania zgodami cookies jak CC PrestaShop Cookies.
| Dane | Źródło | Format |
| $customer->email | hash(’sha256′, strtolower(trim($email))) | |
| Telefon | Pierwszy adres klienta | hash(’sha256′, tylko cyfry) |
| Imię | Pierwszy adres klienta | hash(’sha256′, strtolower(trim())) |
| Nazwisko | Pierwszy adres klienta | hash(’sha256′, strtolower(trim())) |
| Miasto | Pierwszy adres klienta | hash(’sha256′, strtolower(trim())) |
| Kod pocztowy | Pierwszy adres klienta | hash(’sha256′, trim()) |
| Kraj | Pierwszy adres klienta | Kod kraju (bez hashowania) |
dataLayer.push({ 'event': 'purchase', 'user_id': 123, 'customer_status': 'customer', 'user_data': { 'email_hash': 'b4c9a289323b21a01c3e807...', 'phone_hash': '8d23cf6c86e834a7aa6edd9...', 'address': { 'first_name': 'a5bfc9e07964f8dddeb95fc...', 'last_name': '5e884898da28047151d0e56...', 'city': '1c383cd30b7c298ab50293a...', 'postal_code': '4e07408562bedb8b60ce05c...', 'country': 'PL' } } });- visitor – niezalogowany użytkownik bez konta
- guest – zalogowany jako gość (guest checkout)
- customer – zalogowany użytkownik z pełnym kontem
Info
Wszystkie dane osobowe są hashowane algorytmem SHA-256 przed wysłaniem do Google, co oznacza, że Google nie otrzymuje danych w formie czytelnej. Hash jest jednokierunkowy – nie można odtworzyć oryginalnych danych z hasha. To spełnia wymogi RODO dotyczące minimalizacji danych.
8. Tryb debugowania
Tryb debugowania umożliwia szczegółowe śledzenie wszystkich eventów w konsoli przeglądarki, co jest nieocenione podczas testowania i rozwiązywania problemów.Włączanie trybu debug:
- W konfiguracji modułu znajdź sekcję „Rozszerzone opcje danych”
- Zaznacz checkbox „Tryb debugowania”
- Zapisz ustawienia
- Otwórz sklep w nowej karcie przeglądarki
- Otwórz konsolę deweloperską (F12 → zakładka Console)
- Odśwież stronę
- Inicjalizację modułu: [CC Google Track] CcpsGoogleTrack v2.0 – inicjalizacja
- Każdy wysłany event: [CC Google Track] Event: add_to_cart
- Dane eventu (obiekt ecommerce)
- Wyłączone eventy: [CC Google Track] Event wyłączony: share
- Operacje AJAX (pobieranie danych produktów, wishlist, itp.)
- Błędy parsowania i obsługi eventów
- Eventy PrestaShop (updatedCart, updatedProduct)
- Zakończenie inicjalizacji
[CC Google Track] CcpsGoogleTrack v2.0 - inicjalizacja [CC Google Track] Event: page_view {page_type: "product", ...} [CC Google Track] Handler zarejestrowany: add_to_cart [CC Google Track] Handler zarejestrowany: remove_from_cart [CC Google Track] Handler zarejestrowany: select_item [CC Google Track] PrestaShop event: updatedCart {reason: {...}} [CC Google Track] Event: add_to_cart {currency: "PLN", value: 99.99, items: [...]} [CC Google Track] CcpsGoogleTrack v2.0 - inicjalizacja zakończona| Komunikat | Znaczenie |
| Event wyłączony: nazwa_eventu | Event jest wyłączony w konfiguracji |
| Pobieranie danych produktu przez AJAX dla X | Moduł pobiera dane produktu z serwera |
| Otrzymano dane produktu z PHP dla X | Dane produktu zostały pobrane pomyślnie |
| Błąd AJAX X | Wystąpił błąd podczas pobierania danych |
| Błąd parsowania JSON | Odpowiedź AJAX nie jest poprawnym JSON |
| Handler zarejestrowany: nazwa | Obsługa eventu została zainicjowana |
Wskazówka
Tryb debug należy włączyć TYLKO podczas testowania. W środowisku produkcyjnym powinien być wyłączony, aby nie zaśmiecać konsoli odwiedzających i nie spowalniać strony. Zalecamy włączenie trybu debug na środowisku testowym/staging przed wdrożeniem na produkcję.
9. Logowanie eventów
Funkcja logowania eventów zapisuje wszystkie eventy do bazy danych PrestaShop, umożliwiając ich późniejsze przeglądanie i analizę.Włączanie logowania eventów:
- W konfiguracji modułu znajdź sekcję „Rozszerzone opcje danych”
- Zaznacz checkbox „Logowanie eventów”
- Zapisz ustawienia
- Moduł automatycznie utworzy tabelę ps_ccpsgoogletrack_logs w bazie danych
| Kolumna | Typ | Opis |
| id_log | INT AUTO_INCREMENT | Klucz główny |
| event_name | VARCHAR(100) | Nazwa eventu (np. add_to_cart) |
| data_layer | TEXT | Pełny dataLayer w formacie JSON |
| date_add | DATETIME | Data i czas dodania |
- W konfiguracji modułu przejdź do zakładki „Logi”
- Zobaczysz tabelę z ostatnimi 100 logami
- Kolumny: Data, Event, Data Layer (JSON)
- Możliwość wyczyszczenia wszystkich logów przyciskiem „Wyczyść logi”
Event: add_to_cart Data: 2025-12-10 14:30:45 Data Layer: { "event": "add_to_cart", "ecommerce": { "currency": "PLN", "value": 99.99, "items": [ { "item_id": "123", "item_name": "Produkt testowy", "price": 99.99, "quantity": 1 } ] }, "page_type": "product", "customer_status": "visitor" }- Eventy z panelu administracyjnego (hook displayHeader) – logowanie PHP
- Eventy wysyłane przez JavaScript – logowanie przez AJAX
- Wszystkie eventy poza tymi wyłączonymi w konfiguracji
- Logowanie działa niezależnie od trybu debug
- W zakładce „Logi” kliknij przycisk „Wyczyść logi”
- Potwierdź operację w oknie dialogowym
- Wszystkie logi zostaną usunięte z bazy danych
- Pojawi się komunikat potwierdzający
Ostrzeżenie
Logowanie eventów może generować dużą ilość danych w bazie, szczególnie w sklepach o dużym ruchu. Zalecamy regularne czyszczenie logów (np. co miesiąc) lub włączanie logowania tylko podczas testowania. W środowisku produkcyjnym zwykle nie ma potrzeby permanentnego logowania.
10. Własny kod śledzący
Funkcja własnego kodu umożliwia dodanie niestandardowego JavaScript który będzie wykonywany na wszystkich stronach sklepu.Zastosowania własnego kodu:
- Dodatkowe eventy GTM nie obsługiwane przez moduł
- Niestandardowe śledzenie interakcji użytkowników
- Integracja z innymi narzędziami analitycznymi
- Modyfikacje dataLayer według własnych potrzeb
- Skrypty remarketingowe Facebook Pixel, TikTok Pixel, etc.
- W konfiguracji modułu znajdź sekcję „Własny kod śledzący”
- Zaznacz checkbox „Włącz własny kod”
- W dużym polu tekstowym wpisz swój kod JavaScript
- Nie używaj tagów <script> – są dodawane automatycznie
- Zapisz ustawienia
// Własny event do dataLayer dataLayer.push({ 'event': 'custom_scroll', 'scroll_depth': '50%' });
// Śledzenie kliknięć w określone elementy
document.querySelectorAll('.special-button').forEach(function(btn) {
btn.addEventListener('click', function() {
dataLayer.push({
'event': 'special_button_click',
'button_text': this.textContent
});
});
});
// Facebook Pixel !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');- window.dataLayer – główny dataLayer GTM
- window.ccpsGTMDebug – czy tryb debug jest włączony
- window.ccpsEventConfig – konfiguracja eventów
- window.ccpsUserLogged – czy użytkownik jest zalogowany
- window.ccpsAjaxUrl – URL do AJAX controllera modułu
- window.ccpsTranslations – tablica tłumaczeń
- prestashop – obiekt PrestaShop (jeśli dostępny)
// Sprawdź czy użytkownik jest zalogowany if (window.ccpsUserLogged) { dataLayer.push({ 'event': 'logged_user_pageview' }); }
// Użyj konfiguracji eventów
if (window.ccpsEventConfig && window.ccpsEventConfig['custom_event']) {
// Wysyłaj tylko jeśli event jest włączony
dataLayer.push({
'event': 'custom_event'
});
}
// Debug log jeśli tryb debug włączony if (window.ccpsGTMDebug) { console.log('[Mój kod] Inicjalizacja zakończona'); }Notatka
Własny kod jest dodawany na końcu sekcji HEAD, po kodzie GTM i po wszystkich skryptach modułu. Oznacza to, że wszystkie zmienne i funkcje modułu są już dostępne. Kod jest wykonywany na każdej stronie sklepu, więc należy uważać na wydajność.
11. System tłumaczeń
Moduł posiada pełny system tłumaczeń obsługujący wiele języków.Tłumaczone elementy:
| Element | Przykład PL | Przykład EN |
| Nazwy eventów | Dodanie do koszyka (add_to_cart) | Add to cart (add_to_cart) |
| Komunikaty debug | Event wyłączony: | Event disabled: |
| Komunikaty błędów | Błąd pobierania danych produktu | Error fetching product data |
| Statusy | Aktywny | Active |
| Przyciski | Zapisz | Save |
// W PHP (ccpsgoogletrack.php): $translations = [ 'eventDisabled' => $this->l('Event wyłączony:'), 'event' => $this->l('Event:'), 'sendingEvent' => $this->l('Wysyłanie'), // ... itd. ]; $output .= '<script>window.ccpsTranslations = ' . json_encode($translations, JSON_UNESCAPED_UNICODE) . ';</script>';
// W JavaScript (ccpsgoogletrack.js):
function t(key, defaultText) {
if (typeof window.ccpsTranslations !== 'undefined'
&& window.ccpsTranslations[key]) {
return window.ccpsTranslations[key];
}
return defaultText || key;
}
// Użycie: debugLog(t('eventDisabled', 'Event wyłączony:') + ' ' + event);- Skopiuj plik translations/pl.php
- Zmień nazwę na kod języka np. translations/de.php (niemiecki)
- Otwórz plik w edytorze tekstu
- Przetłumacz wszystkie wartości po prawej stronie (po znaku =)
- NIE zmieniaj kluczy (po lewej stronie)
- Zapisz plik z kodowaniem UTF-8
- Wyczyść cache PrestaShop
<?php global $_MODULE; $_MODULE = array(); $_MODULE['<{ccpsgoogletrack}prestashop>ccpsgoogletrack_eventdisabled'] = 'Event wyłączony:'; $_MODULE['<{ccpsgoogletrack}prestashop>ccpsgoogletrack_event'] = 'Event:'; $_MODULE['<{ccpsgoogletrack}prestashop>ccpsgoogletrack_sendingevent'] = 'Wysyłanie'; // ... więcej tłumaczeń- eventDisabled – „Event wyłączony:”
- event – „Event:”
- sendingEvent – „Wysyłanie”
- receivedData – „Otrzymano dane produktu z PHP dla”
- gettingProductData – „Pobieranie danych produktu przez AJAX dla”
- ajaxError – „Błąd AJAX”
- parsingError – „Błąd parsowania JSON:”
- dataError – „Błąd pobierania danych produktu”
- handlerRegistered – „Handler zarejestrowany”
- initialization – „CcpsGoogleTrack v2.0 – inicjalizacja”
- initComplete – „CcpsGoogleTrack v2.0 – inicjalizacja zakończona”
- prestashopEvent – „PrestaShop event”
Wskazówka
Jeśli sklep jest wielojęzyczny, system tłumaczeń automatycznie wybierze odpowiedni język na podstawie aktualnego języka PrestaShop. Wszystkie komunikaty debug, nazwy eventów w konfiguracji oraz komunikaty systemowe będą wyświetlane w języku użytkownika.
12. Eventy – szczegóły
Szczegółowy opis implementacji każdego z 18 eventów obsługiwanych przez moduł.page_view – Wyświetlenie strony
- Kiedy: Na każdej stronie sklepu
- Hook: displayHeader
- Dane: page_type, page_url, page_title, language, currency, customer_status
- Uwagi: Pierwszy event wysyłany na każdej stronie, zawiera pełne dane kontekstowe
- Kiedy: Na stronie produktu
- Hook: displayProductAdditionalInfo
- Dane: currency, value, items[] (item_id, item_name, price, item_brand, item_category, quantity=1)
- Źródło: $product = prestashop.page.product lub AJAX
- Kiedy: Kategorie, strona główna, wyniki wyszukiwania
- Hook: displayFooter (dla kategorii)
- Dane: currency, item_list_id, item_list_name, items[] (wszystkie produkty z indeksem)
- Uwagi: Używa prestashop.page.page_name do identyfikacji typu listy
- Kiedy: Kliknięcie w link produktu z listy
- Mechanizm: JavaScript click listener na .product-miniature a
- Dane: currency, item_list_id, item_list_name, items[] (kliknięty produkt)
- Źródło: data-product-gtm attribute lub AJAX
- Kiedy: Po dodaniu produktu do koszyka
- Mechanizm: Przechwytywanie PrestaShop event 'updateCart’
- Dane: currency, value, items[] (dodany produkt z quantity)
- Źródło: prestashop.page.product lub AJAX GetProductData
- Uwagi: Wykrywa quantity z różnych źródeł (#quantity_wanted, event.reason.qty, event.resp.quantity)
- Kiedy: Po usunięciu produktu z koszyka
- Mechanizm: Click listener na .remove-from-cart
- Dane: currency, value, items[] (usunięty produkt)
- Źródło: Atrybuty data-id-product, data-price, data-name
- Kiedy: Na stronie koszyka
- Hook: displayShoppingCart
- Dane: currency, value, items[] (wszystkie produkty w koszyku)
- Źródło: $cart->getProducts()
- Kiedy: Pierwszy krok realizacji zamówienia
- Mechanizm: JavaScript na stronie checkout
- Dane: currency, value, items[], coupon (jeśli jest)
- Źródło: window.prestashop.cart
- Kiedy: Po wyborze metody dostawy
- Hook: actionCarrierProcess
- Dane: currency, value, items[], shipping_tier (nazwa przewoźnika)
- Mechanizm: Również JavaScript listener na zmianę .delivery-option input
- Kiedy: Po wyborze metody płatności
- Mechanizm: JavaScript listener na .payment-option input
- Dane: currency, value, items[], payment_type (nazwa modułu płatności)
- Kiedy: Strona potwierdzenia zamówienia
- Hook: displayOrderConfirmation
- Dane: currency, transaction_id, value, tax, shipping, coupon, items[]
- Źródło: $order = new Order($id_order)
- Uwagi: Najważniejszy event dla konwersji
- Kiedy: Użycie wyszukiwarki
- Hook: actionSearch
- Dane: search_term (fraza wyszukiwania)
- Fallback: JavaScript sprawdza URL params (s=, search_query=)
- Kiedy: Po zalogowaniu użytkownika
- Hook: actionAuthentication
- Mechanizm: Również JavaScript wykrywa zmianę ccpsUserLogged w sessionStorage
- Dane: method: ’email’
- Kiedy: Po rejestracji nowego klienta
- Hook: actionCustomerAccountAdd
- Mechanizm: Cookie ccps_just_registered przenoszony do sessionStorage
- Dane: method: ’email’
- Kiedy: Dodanie produktu do wishlist
- Mechanizm: Przechwytywanie fetch i XMLHttpRequest do blockwishlist
- Dane: currency, value, items[] (dodany produkt)
- Źródło: AJAX GetProductData
- Uwagi: Działa z modułem blockwishlist
- Kiedy: Kliknięcie w przycisk social share
- Mechanizm: Click listener na .social-sharing a
- Dane: method (facebook/twitter/pinterest/linkedin/email), content_type, item_id, items[]
- Źródło: prestashop.page.product lub AJAX
- Kiedy: Automatycznie jeśli produkt ma rabat
- Hook: displayProductAdditionalInfo (razem z view_item)
- Dane: currency, value, items[], promotion_id, promotion_name
- Uwagi: Używa specific_prices dla danych promocji
Sukces
Wszystkie eventy są zgodne z oficjalną specyfikacją Google Analytics 4 Enhanced Ecommerce. Struktura danych items[] zawiera wszystkie wymagane i rekomendowane pola (item_id, item_name, price, quantity, item_brand, item_category). Moduł automatycznie normalizuje nazwy kategorii (pierwsza litera wielka) i obsługuje do 5 poziomów hierarchii kategorii.
13. Kalendarz eventów
Poniżej przedstawiamy kalendarz pokazujący kiedy i na których stronach są wysyłane poszczególne eventy.Eventy na różnych typach stron:
| Strona | Eventy automatyczne | Eventy interakcyjne |
| Strona główna | page_view, view_item_list | select_item |
| Kategoria | page_view, view_item_list | select_item |
| Wyszukiwanie | page_view, search, view_item_list | select_item |
| Produkt | page_view, view_item, select_promotion (jeśli rabat) | add_to_cart, add_to_wishlist, share |
| Koszyk | page_view, view_cart | remove_from_cart, begin_checkout |
| Checkout | page_view, begin_checkout | add_shipping_info, add_payment_info |
| Potwierdzenie | page_view, purchase | – |
| Logowanie | page_view, login | – |
| Rejestracja | page_view, sign_up | – |
- Strona główna → page_view, view_item_list
- Kliknięcie w produkt → select_item
- Strona produktu → page_view, view_item, (select_promotion)
- Dodanie do koszyka → add_to_cart
- Strona koszyka → page_view, view_cart
- Rozpoczęcie zamówienia → begin_checkout
- Wybór dostawy → add_shipping_info
- Wybór płatności → add_payment_info
- Potwierdzenie → page_view, purchase
Info
Każdy event automatyczny jest wysyłany przy załadowaniu strony (Hook PHP), natomiast eventy interakcyjne są wysyłane w odpowiedzi na działania użytkownika (JavaScript). Moduł inteligentnie wykrywa duplikaty i nie wysyła tego samego eventu dwukrotnie dla tej samej akcji.
14. Test Tag Assistant
Google Tag Assistant to oficjalne narzędzie Google do testowania i debugowania implementacji Google Tag Manager.Testowanie z Tag Assistant:
- Zainstaluj rozszerzenie Tag Assistant Legacy by Google do Chrome
- Lub użyj nowego narzędzia Google Tag Assistant w Chrome DevTools
- Przejdź do strony sklepu
- Kliknij ikonę Tag Assistant w pasku narzędzi
- Kliknij „Enable” aby rozpocząć nagrywanie
- Odśwież stronę
- Wykonaj testowe akcje (dodaj do koszyka, przejdź do checkout, itp.)
- Przejrzyj raport Tag Assistant
- GTM Tag Found – zielony znacznik oznacza poprawną instalację
- DataLayer – sprawdź czy zawiera prawidłowe dane eventów
- Fired Tags – lista tagów które zostały uruchomione
- Variables – zmienne przesyłane do GTM
- Errors – czerwone znaczniki wskazują na problemy
- Zaloguj się do Google Tag Manager
- Przejdź do zakładki „Tagi”
- Kliknij „Nowy”
- Wybierz typ tagu: „Google Analytics: zdarzenie GA4”
- Wpisz ID Measurement (G-XXXXXXXXXX z GA4)
- Nazwa zdarzenia: {{Event}} (zmienna wbudowana)
- Wyzwalacz: „Custom Event” z nazwami eventów (add_to_cart, purchase, etc.)
- Lub wyzwalacz uniwersalny dla wszystkich eventów z dataLayer
- Zapisz i opublikuj kontener
- W GTM kliknij „Podgląd” w prawym górnym rogu
- Wpisz URL sklepu
- Kliknij „Connect”
- Otworzy się nowe okno z debuggerem GTM
- Wykonuj akcje w sklepie
- W debuggerze widać wszystkie eventy dataLayer w czasie rzeczywistym
- Sprawdź które tagi zostały uruchomione dla każdego eventu
Wskazówka
Oficjalne narzędzie Google do testowania znajduje się pod adresem: tagassistant.google.com
Możemy tam przetestować czy wszystko działa poprawnie, czy GTM jest zainstalowany i czy eventy są prawidłowo wysyłane do Google Analytics.
Możemy tam przetestować czy wszystko działa poprawnie, czy GTM jest zainstalowany i czy eventy są prawidłowo wysyłane do Google Analytics.
15. Rozwiązywanie problemów
GTM nie ładuje się na stronie- Sprawdź czy GTM jest włączony w ustawieniach modułu
- Zweryfikuj poprawność GTM Container ID (format: GTM-XXXXXX)
- Wyczyść cache PrestaShop (Zaawansowane parametry → Wydajność → Wyczyść cache)
- Sprawdź źródło strony czy zawiera gtm.js i noscript iframe
- Wyłącz inne moduły które mogą modyfikować header
- Sprawdź czy nie ma błędów JavaScript w konsoli
- Włącz tryb debug i sprawdź konsolę przeglądarki
- Sprawdź czy eventy są włączone w konfiguracji modułu
- Zweryfikuj czy dataLayer jest zdefiniowany (console.log(window.dataLayer))
- Sprawdź czy nie ma konfliktów z innymi modułami GTM
- Upewnij się że JavaScript modułu się załadował (ccpsgoogletrack.js)
- Sprawdź czy hookDisplayHeader jest wykonywany przez motyw
- Włącz tryb debug i obserwuj logi w konsoli
- Sprawdź czy event 'updateCart’ PrestaShop jest wywoływany
- Zweryfikuj czy prestashop.on() jest dostępny
- Sprawdź czy produkty mają przypisane dane (id_product, cena, nazwa)
- Upewnij się że AJAX controller działa (/module/ccpsgoogletrack/ajax)
- Sprawdź czy nie ma błędów AJAX w zakładce Network
- Sprawdź czy event purchase jest włączony
- Zweryfikuj czy jesteś na stronie order-confirmation
- Upewnij się że hookDisplayOrderConfirmation jest wykonywany
- Sprawdź czy zamówienie jest prawidłowo załadowane ($order)
- Włącz logowanie eventów i sprawdź czy purchase jest zapisywany
- W GTM sprawdź czy masz skonfigurowany tag GA4 dla eventu purchase
- Sprawdź czy plik translations/XX.php istnieje dla Twojego języka
- Zweryfikuj format pliku (kodowanie UTF-8, poprawna składnia PHP)
- Wyczyść cache PrestaShop
- Sprawdź czy window.ccpsTranslations jest zdefiniowany w źródle strony
- Upewnij się że funkcja t() jest dostępna w JavaScript
- Sprawdź czy funkcja jest włączona w ustawieniach
- Zweryfikuj czy tabela ps_ccpsgoogletrack_logs istnieje w bazie
- Sprawdź uprawnienia zapisu do bazy danych
- Upewnij się że AJAX controller przyjmuje requesty (action=LogEvent)
- Włącz WP_DEBUG i sprawdź logi błędów
- Sprawdź czy nie przekroczyłeś limitu rozmiaru tabeli
- Sprawdź czy funkcja jest włączona w ustawieniach
- Zweryfikuj czy kod jest poprawny JavaScript (sprawdź konsolę)
- Upewnij się że nie używasz tagów <script> w kodzie
- Sprawdź czy kod znajduje się w źródle strony (sekcja HEAD)
- Testuj kod kawałek po kawałku aby znaleźć błąd
Błąd
Jeśli problemy nadal występują, włącz tryb debug w ustawieniach modułu i logowanie eventów. Zbierz wszystkie informacje z konsoli przeglądarki, zakładki Network oraz logów eventów. Skontaktuj się ze wsparciem COCOS przez cocos.codes/wsparcie dołączając zebrane informacje.
16. FAQ
Czy moduł jest kompatybilny z PrestaShop 9.0?Tak, moduł został przetestowany i jest w pełni kompatybilny z PrestaShop 1.7.x, 8.x oraz najnowszą wersją 9.0.
Czy mogę używać modułu bez konta Google Analytics?
Tak, moduł przesyła dane do Google Tag Manager. GTM może przekazywać dane do wielu różnych systemów, nie tylko do Google Analytics. Możemy wysyłać dane do Facebook Pixel, TikTok Pixel, własnych systemów analitycznych itp.
Czy moduł zwalnia sklep?
Nie, moduł jest zoptymalizowany pod kątem wydajności. Kod GTM ładuje się asynchronicznie, a wszystkie skrypty są zminifikowane. Wpływ na wydajność jest minimalny (< 0.1s czasu ładowania).
Czy mogę wyłączyć niektóre eventy?
Tak, w konfiguracji modułu możemy włączyć lub wyłączyć każdy z 18 eventów osobno. Wyłączone eventy nie są w ogóle wysyłane do dataLayer.
Jak działa wykrywanie add_to_cart?
Moduł przechwytuje event 'updateCart’ PrestaShop oraz nasłuchuje kliknięć w przyciski dodawania do koszyka. Automatycznie wykrywa quantity z różnych źródeł i pobiera dane produktu przez AJAX jeśli potrzeba.
Czy moduł obsługuje wielojęzyczność?
Tak, moduł posiada pełne tłumaczenia dla języka polskiego i angielskiego. Możemy łatwo dodać własne języki kopiując i tłumacząc pliki z katalogu translations/.
Co to jest Enhanced Conversions?
Enhanced Conversions to funkcja Google Ads która poprawia dokładność pomiaru konwersji poprzez przesyłanie hashowanych danych użytkowników (email, telefon, adres). Wymaga zgody RODO.
Czy moduł jest zgodny z RODO?
Moduł sam w sobie jest zgodny z RODO – hashuje wszystkie dane osobowe algorytmem SHA-256. Jednak aby być w pełni zgodnym, musimy mieć aktualną politykę prywatności i zgodę użytkowników na cookies. Zalecamy integrację z modułem zarządzania cookies.
Jak sprawdzić czy moduł działa poprawnie?
Włącz tryb debug w ustawieniach, otwórz konsolę przeglądarki (F12) i obserwuj logi. Możesz też użyć Google Tag Assistant lub trybu podglądu GTM aby zobaczyć wszystkie eventy w czasie rzeczywistym.
Czy mogę dodać własne eventy?
Tak, możesz użyć funkcji „Własny kod śledzący” w ustawieniach aby dodać dowolny JavaScript, który będzie wysyłał własne eventy do dataLayer.
Jak długo są przechowywane logi eventów?
Logi są przechowywane w bazie danych do momentu ręcznego wyczyszczenia. Zalecamy regularne czyszczenie logów (np. co miesiąc) aby nie zapełniać bazy danych.
Czy moduł działa z modułem cookies/GDPR?
Tak, moduł jest kompatybilny z większością modułów zarządzania zgodami cookies. Możemy zintegrować go z Google Consent Mode 2.0 przez własny kod śledzący.
Co się dzieje przy deinstalacji?
Moduł usuwa wszystkie swoje ustawienia z bazy danych (opcje, tabela logów). Nie usuwa natomiast plików modułu – te należy usunąć ręcznie z katalogu modules/ccpsgoogletrack/.
Czy mogę eksportować logi eventów?
Obecnie moduł nie posiada funkcji eksportu logów. Możemy jednak bezpośrednio zapytać bazę danych (tabela ps_ccpsgoogletrack_logs) lub dodać własną funkcję eksportu.
Jak często są aktualizowane tłumaczenia?
Tłumaczenia są aktualizowane przy każdej nowej wersji modułu. Jeśli brakuje tłumaczenia dla jakiegoś języka, możemy je dodać samodzielnie lub zgłosić do COCOS.
